<template>
	<div class="system-add-dept-container">
		<el-drawer title="修改用户表" v-model="showWindows" @close="onCancel">
			<el-form ref="formRef" :model="sysUser" :rules="rules" size="small" label-width="30%" style="width: 90%">
				<el-form-item label="姓名" prop="userName">
					<el-input v-model="sysUser.userName" placeholder="请输入姓名" />
				</el-form-item>
				<el-form-item label="头像" prop="userAvatar">
					<el-input v-model="sysUser.userAvatar" placeholder="请输入头像" />
				</el-form-item>
				<el-form-item label="手机" prop="userMobile">
					<el-input v-model="sysUser.userMobile" placeholder="请输入手机" />
				</el-form-item>
				<el-form-item label="邮箱" prop="userEmail">
					<el-input v-model="sysUser.userEmail" placeholder="请输入邮箱" />
				</el-form-item>
				<el-form-item label="性别 0.未知 1.男 2.女" prop="userSex">
					<el-input v-model="sysUser.userSex" placeholder="请输入性别 0.未知 1.男 2.女" />
				</el-form-item>
				<el-form-item label="账号" prop="userAccount">
					<el-input v-model="sysUser.userAccount" placeholder="请输入账号" />
				</el-form-item>
				<el-form-item label="密码" prop="userPassword">
					<el-input v-model="sysUser.userPassword" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="部门ID" prop="orgId">
					<el-input v-model="sysUser.orgId" placeholder="请输入部门ID" />
				</el-form-item>
				<el-form-item label="岗位ID" prop="stationId">
					<el-input v-model="sysUser.stationId" placeholder="请输入岗位ID" />
				</el-form-item>
				<el-form-item label="是否内置 true:是 false:否" prop="readonly">
					<el-input v-model="sysUser.readonly" placeholder="请输入是否内置 true:是 false:否" />
				</el-form-item>
				<el-form-item label="最后一次输错密码时间" prop="passwordErrorLastTime">
					<el-input v-model="sysUser.passwordErrorLastTime" placeholder="请输入最后一次输错密码时间" />
				</el-form-item>
				<el-form-item label="密码错误次数" prop="passwordErrorNum">
					<el-input v-model="sysUser.passwordErrorNum" placeholder="请输入密码错误次数" />
				</el-form-item>
				<el-form-item label="密码过期时间" prop="passwordExpireTime">
					<el-input v-model="sysUser.passwordExpireTime" placeholder="请输入密码过期时间" />
				</el-form-item>
				<el-form-item label="最后登录时间" prop="lastLoginTime">
					<el-input v-model="sysUser.lastLoginTime" placeholder="请输入最后登录时间" />
				</el-form-item>
			</el-form>
			<div class="el-drawer__footer">
				<el-button @click="onCancel" size="small">取 消</el-button>
				<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
			</div>
		</el-drawer>
	</div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { editSysUser, getSysUserInfo } from '/@/api/organized/user/index';
import { ElMessage } from 'element-plus';

export default {
	name: 'editSysUser',
	emits: ['initTableData'],
	props: {},
	setup(props, context) {
		const formRef = ref();

		const state = reactive({
			showWindows: false,
			sysUser: {
				userName: '',
				userAvatar: '',
				userMobile: '',
				userEmail: '',
				userSex: '',
				userAccount: '',
				userPassword: '',
				orgId: '',
				stationId: '',
				readonly: '',
				passwordErrorLastTime: '',
				passwordErrorNum: '',
				passwordExpireTime: '',
				lastLoginTime: '',
			},
			userId: '',
			rules: {
				userName: [{ required: true, message: '请输入姓名', trigger: 'blue' }],
				userAvatar: [{ required: true, message: '请输入头像', trigger: 'blue' }],
				userMobile: [{ required: true, message: '请输入手机', trigger: 'blue' }],
				userEmail: [{ required: true, message: '请输入邮箱', trigger: 'blue' }],
				userSex: [{ required: true, message: '请输入性别 0.未知 1.男 2.女', trigger: 'blue' }],
				userAccount: [{ required: true, message: '请输入账号', trigger: 'blue' }],
				userPassword: [{ required: true, message: '请输入密码', trigger: 'blue' }],
				orgId: [{ required: true, message: '请输入部门ID', trigger: 'blue' }],
				stationId: [{ required: true, message: '请输入岗位ID', trigger: 'blue' }],
				readonly: [{ required: true, message: '请输入是否内置 true:是 false:否', trigger: 'blue' }],
				passwordErrorLastTime: [{ required: true, message: '请输入最后一次输错密码时间', trigger: 'blue' }],
				passwordErrorNum: [{ required: true, message: '请输入密码错误次数', trigger: 'blue' }],
				passwordExpireTime: [{ required: true, message: '请输入密码过期时间', trigger: 'blue' }],
				lastLoginTime: [{ required: true, message: '请输入最后登录时间', trigger: 'blue' }],
			},
		});

		//打开添加窗口
		const openWindows = (userId: any) => {
			state.userId = userId;
			getSysUserInfo(userId).then((res: any) => {
				state.sysUser = res.data;
			});
			state.showWindows = true;
		};

		//取消
		const onCancel = () => {
			formRef.value.resetFields();
			state.showWindows = false;
		};

		//提交
		const onSubmit = () => {
			formRef.value.validate((valid: any) => {
				if (valid) {
					editSysUser(state.sysUser, state.userId).then((res: any) => {
						if (res.code == 200) {
							onCancel();
							context.emit('initTableData');
						} else {
							ElMessage.error(res.message);
						}
					});
				}
			});
		};

		return {
			formRef,
			openWindows,
			onCancel,
			onSubmit,
			...toRefs(state),
		};
	},
};
</script>

<style scoped>
.cropper-img {
	margin: auto;
	width: 100px;
	height: 100px;
	border-radius: 100%;
}
</style>
